<template>
	<div class="es-center">
		<div class="es-center-top">
			<div class="app-center-radar">
				<RadarScan :running="running"></RadarScan>
			</div>

			<div class="btn-wrapper">
				<el-button
					:type="running ? 'danger' : 'primary'"
					plain
					size="large"
					class="btn-control"
					@click="onStart"
					:loading="loading"
				>
					{{ running ? "停止监测" : "开始监测" }}
				</el-button>
				<el-button
					type="success"
					plain
					size="large"
					class="btn-control"
					@click="onReset"
					:loading="resetLoading"
				>
					全部恢复
				</el-button>
			</div>
		</div>
		<Bottom :warn-count="warnCount" :duration="monitorDuration" />
	</div>
</template>

<script setup lang="ts">
import RadarScan from "@/components/radar-scan/index.vue";
import { ElButton } from "element-plus";
import Bottom from "./Bottom.vue";
import type { Ref } from "vue";
import { computed, inject  } from 'vue'

const loading = inject("loading") as Ref<boolean>;
const running = inject("running") as Ref<boolean>;
const onStart = inject("onStart") as () => void;
const resetLoading = inject("resetLoading") as Ref<boolean>;
const onReset = inject("onReset") as () => void;
const monitorDuration = inject("monitorDuration") as Ref<number>;

const alarms = inject('alarms') as Ref<any[]>
const warnCount = computed(() => {
	return alarms.value.length || 0
})

</script>

<style lang="scss" scoped>
.es-center {
	position: relative;
	// width: 100%;
	// height: 500px;
	padding: 0 16px;
	animation: slideAndFade 1.5s;
	.es-center-top {
		height: calc(100% - 150px);
	}
}

.btn-wrapper {
	margin-top: 60px;
	display: flex;
	justify-content: center;
}

.app-center-radar {
	margin: 50px auto 0;
	width: 500px;
}

.btn-control {
	font-size: 40px;
	padding: 40px;
}

.btn-control + .btn-control {
	margin-left: 20px;
}

@keyframes slideAndFade {
	0% {
		transform: translateY(218px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}
</style>
